<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影列表</title>
    <base th:href="@{/}">
    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto 0 auto;
        }

        table th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>电影ID</th>
            <th>电影名称</th>
            <th>电影票价格</th>
            <th>删除</th>
            <th>更新</th>
        </tr>

        <tbody th:if="${not #lists.isEmpty(movieList)}">
            <tr th:each="movie : ${movieList}">
                <td th:text="${movie.movieId}">电影ID</td>
                <td th:text="${movie.movieName}">电影名称</td>
                <td th:text="${movie.moviePrice}">电影价格</td>
                <td><a th:href="@{/rest/movie/}+${movie.movieId}" onclick="return deleteById(this.href)">删除</a></td>
                <td><a th:href="@{rest/movie/}+${movie.movieId}">更新</a></td>
            </tr>
        </tbody>
        <tbody th:unless="${not #lists.isEmpty(movieList)}">
            <tr>
                <td colspan="5">没有电影可以展示~~ <a href="index.html">返回首页</a></td>
            </tr>
        </tbody>
    </table>

    <form id="fm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <hr>
    <a href="rest/movie-add">添加</a>
    <script>
        function deleteById(path){
            const formNode = document.getElementById("fm");
            formNode.action=path;
            console.log(path);
            formNode.submit();
            return false
        }
    </script>
</body>
</html>